<template>
  <div class="schedule-container">
    <van-nav-bar 
      title="排课管理" 
      left-text="返回" 
      left-arrow 
      @click-left="$router.back()"
    />
    
    <van-tabs v-model:active="activeTab">
      <van-tab title="自动排课">
        <div class="tab-content">
          <van-cell-group>
            <van-field label="选择班级">
              <template #input>
                <van-button size="small" @click="showClassPicker = true">
                  {{ selectedClass?.name || '请选择班级' }}
                </van-button>
              </template>
            </van-field>
            
            <van-field label="选择课程">
              <template #input>
                <van-button size="small" @click="showCoursePicker = true">
                  {{ selectedCourse?.name || '请选择课程' }}
                </van-button>
              </template>
            </van-field>
            
            <van-field label="开始日期">
              <template #input>
                <van-button size="small" @click="showDatePicker = true">
                  {{ startDate || '请选择日期' }}
                </van-button>
              </template>
            </van-field>
          </van-cell-group>
          
          <div class="action-buttons">
            <van-button 
              type="primary" 
              block 
              :disabled="!canAutoSchedule"
              @click="executeAutoSchedule"
            >
              开始自动排课
            </van-button>
          </div>
        </div>
      </van-tab>
      
      <van-tab title="课表查看">
        <div class="tab-content">
          <van-cell-group>
            <van-field label="选择班级">
              <template #input>
                <van-button size="small" @click="showViewClassPicker = true">
                  {{ viewSelectedClass?.name || '请选择班级' }}
                </van-button>
              </template>
            </van-field>
          </van-cell-group>
          
          <div v-if="scheduleData.length" class="schedule-table">
            <div class="schedule-header">
              <h3>{{ viewSelectedClass?.name }}课程表</h3>
              <p>班主任：{{ viewSelectedClass?.teacher }} 联系方式：{{ viewSelectedClass?.phone }}</p>
            </div>
            
            <van-collapse v-model="activeCollapse">
              <van-collapse-item 
                v-for="day in scheduleData" 
                :key="day.date"
                :title="`${day.date} ${day.weekday}`"
                :name="day.date"
              >
                <div class="day-schedule">
                  <div 
                    v-for="item in day.courses" 
                    :key="item.id"
                    class="course-item"
                  >
                    <div class="course-time">{{ item.time }}</div>
                    <div class="course-info">
                      <div class="course-name">{{ item.courseName }}</div>
                      <div class="course-detail">
                        {{ item.teacher }} | {{ item.venue }} | {{ item.type }}
                      </div>
                    </div>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    
    <!-- 选择器 -->
    <van-popup v-model:show="showClassPicker" position="bottom">
      <van-picker
        :columns="classOptions"
        @confirm="onClassConfirm"
        @cancel="showClassPicker = false"
      />
    </van-popup>
    
    <van-popup v-model:show="showCoursePicker" position="bottom">
      <van-picker
        :columns="courseOptions"
        @confirm="onCourseConfirm"
        @cancel="showCoursePicker = false"
      />
    </van-popup>
    
    <van-popup v-model:show="showDatePicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false"
      />
    </van-popup>
    
    <van-popup v-model:show="showViewClassPicker" position="bottom">
      <van-picker
        :columns="classOptions"
        @confirm="onViewClassConfirm"
        @cancel="showViewClassPicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { showToast, showLoadingToast } from 'vant'

const activeTab = ref(0)
const activeCollapse = ref([])

// 自动排课相关
const showClassPicker = ref(false)
const showCoursePicker = ref(false)
const showDatePicker = ref(false)
const selectedClass = ref(null)
const selectedCourse = ref(null)
const startDate = ref('')
const currentDate = ref(new Date())

// 课表查看相关
const showViewClassPicker = ref(false)
const viewSelectedClass = ref(null)
const scheduleData = ref([])

// 模拟数据
const classOptions = ref([
  { text: '2025年第1期（总第1期）M3模块', value: 1, teacher: '吴伟', phone: '18527307932' },
  { text: '2025年第2期班级', value: 2, teacher: '张老师', phone: '13800138000' }
])

const courseOptions = ref([
  { text: 'M3.1.1航空器入坑和离港', value: 1 },
  { text: 'M3.1.2航空器停靠和系留', value: 2 },
  { text: 'M3.1.3地面设备的使用', value: 3 }
])

const canAutoSchedule = computed(() => {
  return selectedClass.value && selectedCourse.value && startDate.value
})

const onClassConfirm = ({ selectedOptions }) => {
  selectedClass.value = selectedOptions[0]
  showClassPicker.value = false
}

const onCourseConfirm = ({ selectedOptions }) => {
  selectedCourse.value = selectedOptions[0]
  showCoursePicker.value = false
}

const onDateConfirm = () => {
  startDate.value = currentDate.value.toISOString().split('T')[0]
  showDatePicker.value = false
}

const onViewClassConfirm = ({ selectedOptions }) => {
  viewSelectedClass.value = selectedOptions[0]
  showViewClassPicker.value = false
  loadScheduleData()
}

const executeAutoSchedule = async () => {
  const toast = showLoadingToast({
    message: '正在自动排课...',
    forbidClick: true,
  })
  
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000))
    toast.clear()
    showToast('排课成功')
  } catch (error) {
    toast.clear()
    showToast('排课失败')
  }
}

const loadScheduleData = () => {
  // 模拟课表数据
  scheduleData.value = [
    {
      date: '8月4日',
      weekday: '星期一',
      courses: [
        {
          id: 1,
          time: '08:30-10:10',
          courseName: 'M3.1.1航空器入坑和离港',
          teacher: '吴伟',
          venue: '实操基地',
          type: '实操'
        },
        {
          id: 2,
          time: '10:30-12:00',
          courseName: 'M3.1.1航空器入坑和离港',
          teacher: '吴伟',
          venue: '实操基地',
          type: '实操'
        }
      ]
    },
    {
      date: '8月5日',
      weekday: '星期二',
      courses: [
        {
          id: 3,
          time: '08:30-10:30',
          courseName: 'M3.1.2航空器停靠和系留',
          teacher: '吴伟',
          venue: '实操基地',
          type: '实操'
        }
      ]
    }
  ]
}

onMounted(() => {
  // 初始化数据
})
</script>

<style lang="scss" scoped>
.schedule-container {
  background: $background-color;
  min-height: 100vh;
}

.tab-content {
  padding: $padding-md;
}

.action-buttons {
  margin-top: $padding-lg;
}

.schedule-table {
  margin-top: $padding-md;
}

.schedule-header {
  background: white;
  padding: $padding-md;
  border-radius: $border-radius-lg;
  margin-bottom: $padding-md;
  text-align: center;
  
  h3 {
    font-size: $font-size-lg;
    color: $text-color;
    margin-bottom: 4px;
  }
  
  p {
    font-size: $font-size-sm;
    color: $text-color-2;
  }
}

.day-schedule {
  padding: $padding-sm 0;
}

.course-item {
  display: flex;
  align-items: center;
  padding: $padding-sm 0;
  border-bottom: 1px solid $border-color;
  
  &:last-child {
    border-bottom: none;
  }
}

.course-time {
  min-width: 80px;
  font-size: $font-size-sm;
  color: $primary-color;
  font-weight: bold;
}

.course-info {
  flex: 1;
  margin-left: $padding-sm;
}

.course-name {
  font-size: $font-size-md;
  color: $text-color;
  margin-bottom: 2px;
}

.course-detail {
  font-size: $font-size-xs;
  color: $text-color-2;
}
</style>